<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="800px"
    @close="close"
  >
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="父菜单" prop="pids">
            <el-cascader
              v-model="form.pids"
              clearable
              :options="menus"
              :props="props"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" clearable placeholder="标题" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" clearable placeholder="名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路径" prop="path">
            <el-input v-model="form.path" clearable placeholder="路径" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="组件" prop="component">
            <el-input v-model="form.component" clearable placeholder="组件" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="rule_type">
            <el-select
              v-model="form.rule_type"
              clearable
              filterable
              multiple
              placeholder="类型"
            >
              <el-option
                v-for="(item, index) in ruleTypes"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="图标" prop="icon">
            <el-input v-model="form.icon" clearable placeholder="图标" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="idx">
            <el-input-number v-model="form.idx" clearable placeholder="排序" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="隐藏" prop="hidden">
            <el-switch
              v-model="form.hidden"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="条件" prop="condition">
        <el-input v-model="form.condition" clearable placeholder="条件" />
      </el-form-item>
      <el-form-item label="备注" prop="descri">
        <el-input
          v-model="form.descri"
          clearable
          placeholder="备注"
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { doEdit, doAdd } from '@/api/authRule'
  import { assignFormByFields } from '@/utils'
  import { ruleTypes } from '@/utils/constant'

  export default {
    name: 'Edit',
    props: {
      menus: {
        type: Array,
        default() {
          return []
        },
      },
    },
    data() {
      return {
        props: {
          label: 'title',
          value: 'id',
          checkStrictly: true,
        },
        fields: [
          'pids',
          'title',
          'name',
          'path',
          'component',
          'rule_type',
          'icon',
          'idx',
          'hidden',
          'status',
          'condition',
          'descri',
        ],
        form: { status: 1 },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入名称' }],
        },
        title: '',
        dialogFormVisible: false,
        ruleTypes,
      }
    },
    methods: {
      showEdit(row, action) {
        if (!row || action === 'addChild') {
          this.title = '添加'
          if (row && row.id) {
            this.form.pids = ((row && row.pids) || []).concat(row.id)
          }
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const postData = assignFormByFields(
              {
                ...this.form,
              },
              this.fields
            )
            if (this.form.id) {
              const { msg } = await doEdit(this.form.id, postData)
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            } else {
              const { msg } = await doAdd(postData)
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            }
            this.$emit('fetch-data')
            this.close()
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .vab-tree-border {
    height: 200px;
    padding: $base-padding;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: $base-border-radius;
  }
</style>
